<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>个人简历</title>
    <link rel="stylesheet" href="index.css">
    <style>
        body {
            margin: 0;
            background-color: #99cccc;
            height: 2222px;
        }

        #one {
            background-image: url(bg.jpg);
            width: 100%;
            height: 600px;
            background-position: 50% 50%;
        }

        #two,
        #third,
        #classmate {
            width: 1300px;
            margin: 40px auto;
        }

        .xian {
            width: 1300px;
            height: 600px;
            border-radius: 50%;
            border: solid 2px #ff22ff;
        }

        .aa {
            font-size: 40px;
            text-decoration: none;
        }

        p {
            text-indent: 2em;
            line-height: 35px;
        }

        .qq {
            font-size: 15px;
            font-weight: 700;
            color: red;
        }

        .fif {
            /*display: flex;*/
            /*align-items: center;*/
            /*justify-content: center;*/
            /*border:solid 1px red;*/
            margin: 50px auto;
            /*margin-bottom: 50px;*/
            width: 1300px;
            height: 50px;

            /*overflow: hidden;*/
        }

        .qwe,.asd {
            display: inline-block;
            height: 40px;
            width: 640px;
            /*border: solid 1px red;*/
            text-align: center;
        }
        #firend {
            width: 1300px;
            height: 600px;
            background-image: url(4.jpg);
            background-size: 100% 100%;
            border-radius: 50%;
            position: relative;
        }

        .classmate {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        #classmate1 {
            position: relative;
            left: 500px;
            top: 300px;
        }

        #classmate2 {
            position: absolute;
            left: 300px;
            top: 100px;
        }
        #classmate3{
            position: absolute;
            left: 700px;
            top: 50px;
        }
        #box{
            background-color: #99cccc;
            width: 100px;
            height: 150px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 5;
            border-radius: 25px;
            border: 2px solid;
            border-bottom-color: red;
            border-left-color: blueviolet;
            border-right-color: yellowgreen;
            border-top-color: darkcyan;
        }
        #inner{
            margin: 0 auto;
            font-size: 20px;
            text-align: center;
        }
        #inner a{
            display: block;
            line-height: 50px;
            text-decoration: none;
        }
        
    </style>
</head>

<body>
    <div id="box">
        <div id="inner">
            <a href="#school">我的学校</a>
            <a href="#home">我的家乡</a>
            <a href="#mate">我的同学</a>
        </div>
    </div>
    <div id="one"></div>
    <div id="two">
        <a id="school" class="aa">我的学校</a>
        <p>黄河科技学院位于河南郑州。学校创立于1984年10月；1994年2月，经国家教育委员会批准建立民办黄河科技学院，实施高等专科学历教育；2000年3月，经国家教育部批 准，在民办专科层次的基础上建立新的本科层次的黄河科技学院；2004年取得学士授予权；2008年通过国家教育部普通本科教学工作水平评估；2013年被教育部批准为“应
            用科技大学改革试点战略研究单位”。并成为中国应用技术大学联盟的首批成员和河南省首批转型发展试点高校；2014年学校获高等教育国家级教学成果二等奖。2015 年，学校“黄河众创空间”被科技部认定为全国首批众创空间，学校获批“河南省大学生创业示范基地”“河南省首批示范性应用技术类型本科院校”。2016年，学校荣登首批“全
            国高校创新创业工作50强"榜单，学校大学科技园被认定为国家级科技企业孵化器，学校获批“河南省创业孵化示范基地”“河南省省普通大中专毕业生就业创业工作先进单位”。 2017年，学校创业园获批“全国大学生创业示范园”，学校获批“河南省首批高校双创基地”。学校的发展史就是一部敢为天下先的创新创业史，曾两次被美国弗吉尼亚大学商学
            院写进教学案例，并被《人民日报》《华盛顿邮报》等中外著名媒体多次报道。
            <a href="http://www.hhstu.edu.cn/" target="_blank" class="qq">点击了解更多...</a></p>
        <img src="hh.png" class="xian">
    </div>
    <div id="third">
        <a id="home" class="aa">我的家乡</a>
        <p>光山县，位于河南省东南部，北临淮河，南依大别山，位于河南、湖北、安徽三省交界处。京九铁路、宁西铁路、国道312、国道106、沪陕高速、大广高速穿过。光山是全国 重要商品粮生产基地，农产品产区。光山是红色革命老区，风景秀丽，有王大湾会议旧址、徐畈鄂豫皖首府机关旧址，宝相寺春秋墓、“诗城乐地”净居寺、司马光故居、永济
            桥、紫水塔、大尖山、白露河、官渡河等。信阳市“十三五”规划纲要提出加快推进潢川、光山两县一体化发展，构建市域副中心城市，支持撤县改市。到 2020年，潢川县城常 住人口达到50万，光山县城常住人口达到30万，两县形成一体化发展格局。
            <a href="http://www.guangshan.gov.cn/" target="_blank" class="qq">点击了解更多...</a></p>
        <img src="gs.jpg" class="xian">
        <hr>
    </div>
    <div id="classmate">
        <a id="mate" class="aa">我的同学</a>
        <p>光山县，位于河南省东南部，北临淮河，南依大别山，位于河南、湖北、安徽三省交界处。京九铁路、宁西铁路、国道312、国道106、沪陕高速、大广高速穿过。光山是全国 重要商品粮生产基地，农产品产区。光山是红色革命老区，风景秀丽，有王大湾会议旧址、徐畈鄂豫皖首府机关旧址，宝相寺春秋墓、“诗城乐地”净居寺、司马光故居、永济
            桥、紫水塔、大尖山、白露河、官渡河等。信阳市“十三五”规划纲要提出加快推进潢川、光山两县一体化发展，构建市域副中心城市，支持撤县改市。到 2020年，潢川县城常 住人口达到50万，光山县城常住人口达到30万，两县形成一体化发展格局。
            <a href="http://www.guangshan.gov.cn/" target="_blank" class="qq">点击了解更多...</a></p>
        <div id="firend">
            <img src="1.jpg" class="classmate" id="classmate1">
            <img src="2.jpg" class="classmate" id="classmate2">
            <img src="3.jpg" class="classmate" id="classmate3">
        </div>

        <hr>
    </div>
    <footer>
        <div class="fif">
            <span class="qwe">我的电话：xxxxxxxxxxxxx </span>
            <span class="asd">个人主页</span>
        </div>
    </footer>


</body>

</html>